å¹ççã§é«æ§èœãªã¢ããªã±ãŒã·ã§ã³ã®ããã®React SuspenseããªãœãŒã¹äŸåé¢ä¿ã°ã©ããããŒã¿èªã¿èŸŒã¿ãªãŒã±ã¹ãã¬ãŒã·ã§ã³ãæ¢æ±ããŸãããã¹ããã©ã¯ãã£ã¹ãšé«åºŠãªãã¯ããã¯ãåŠã³ãŸãããã
React SuspenseãªãœãŒã¹äŸåé¢ä¿ã°ã©ãïŒããŒã¿èªã¿èŸŒã¿ã®ãªãŒã±ã¹ãã¬ãŒã·ã§ã³
React 16.6ã§å°å ¥ããããã®åŸã®ããŒãžã§ã³ã§ããã«æŽç·ŽãããReact Suspenseã¯ãReactã¢ããªã±ãŒã·ã§ã³ã«ãããéåæããŒã¿èªã¿èŸŒã¿ã®æ±ãæ¹ãé©åœçã«å€ããŸããããã®åŒ·åãªæ©èœã¯ããªãœãŒã¹äŸåé¢ä¿ã°ã©ããšçµã¿åãããããšã§ãããŒã¿ãã§ãããšUIã¬ã³ããªã³ã°ã«å¯ŸããŠããã宣èšçã§å¹ççãªã¢ãããŒããå¯èœã«ããŸãããã®ããã°èšäºã§ã¯ãReact SuspenseããªãœãŒã¹äŸåé¢ä¿ã°ã©ããããŒã¿èªã¿èŸŒã¿ã®ãªãŒã±ã¹ãã¬ãŒã·ã§ã³ã®æŠå¿µãæãäžãã髿§èœã§ãŠãŒã¶ãŒãã¬ã³ããªãŒãªã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã®ç¥èãšããŒã«ãæäŸããŸãã
React Suspenseãçè§£ãã
React Suspenseã®æ žå¿ã¯ãAPIããã®ããŒã¿ååŸãªã©ã®éåææäœãåŸ ã€éãã³ã³ããŒãã³ããã¬ã³ããªã³ã°ããäžæïŒsuspendïŒãã§ããããã«ããããšã§ããã¢ããªã±ãŒã·ã§ã³å šäœã«æ£åšããããŒãã£ã³ã°ã¹ãããŒã衚瀺ãã代ããã«ãSuspenseã¯ããŒãã£ã³ã°ç¶æ ãåŠçããããã®çµ±äžããã宣èšçãªæ¹æ³ãæäŸããŸãã
äž»èŠãªæŠå¿µ:
- Suspenseå¢ç: äžæããå¯èœæ§ã®ããã³ã³ããŒãã³ããã©ãããã
<Suspense>ã³ã³ããŒãã³ãã§ããã©ãããããã³ã³ããŒãã³ããäžæãããŠããéã«ã¬ã³ããªã³ã°ããUIãæå®ããfallbackããããã£ãåãåããŸãã - Suspenseäºæã®ããŒã¿ãã§ãã: Suspenseãæ©èœãããã«ã¯ãäŸå€ãšããŠã¹ããŒã§ãããthenableãïŒPromiseïŒã䜿çšããŠãç¹å®ã®âœ æ³ã§ããŒã¿ãã§ãããâŸãå¿ èŠããããŸããããã«ãããReactã«ã³ã³ããŒãã³ããäžæããå¿ èŠãããããšãäŒããŸãã
- ã³ã³ã«ã¬ã³ãã¢ãŒã: Suspenseã¯ã³ã³ã«ã¬ã³ãã¢ãŒããªãã§ã䜿✀ã§ããŸããããã®ç䟡ã¯äœµçšããããšã§çºæ®ãããŸããã³ã³ã«ã¬ã³ãã¢ãŒãã«ãããReactã¯ã¬ã³ããªã³ã°ãäžæãäžæåæ¢ãåéãããã«ã¯ç Žæ£ããŠãUIã®å¿çæ§ãç¶æã§ããŸãã
React Suspenseã®å©ç¹
- ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®åäž: äžè²«ããããŒãã£ã³ã°ã€ã³ãžã±ãŒã¿ãŒãšã¹ã ãŒãºãªé·ç§»ã«ãããå šäœçãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžããŸãããŠãŒã¶ãŒã¯ãå£ãããäžå®å šãªUIã«ééããã®ã§ã¯ãªããããŒã¿ãèªã¿èŸŒã¿äžã§ããããšãæç¢ºã«ç€ºãããŸãã
- 宣èšçãªããŒã¿ãã§ãã: Suspenseã¯ãããŒã¿ãã§ããã«å¯ŸããŠãã宣èšçãªã¢ãããŒããä¿é²ããã³ãŒããèªã¿ããããä¿å®ããããããŸããã©ã®ããã«ããŒã¿ããã§ããããããŒãã£ã³ã°ç¶æ ã管çãããã§ã¯ãªããã©ã®ããŒã¿ãå¿ èŠãã«éäžã§ããŸãã
- ã³ãŒãåå²: Suspenseã¯ã³ã³ããŒãã³ããé å»¶èªã¿èŸŒã¿ããããã«äœ¿çšã§ããåæãã³ãã«ãµã€ãºãåæžããååããŒãžèªã¿èŸŒã¿æéãæ¹åããŸãã
- ç¶æ 管çã®ç°¡çŽ å: Suspenseã¯ãããŒãã£ã³ã°ããžãã¯ãSuspenseå¢çå ã«éäžãããããšã§ãç¶æ 管çã®è€éãã軜æžã§ããŸãã
ãªãœãŒã¹äŸåé¢ä¿ã°ã©ãïŒããŒã¿ãã§ããã®ãªãŒã±ã¹ãã¬ãŒã·ã§ã³
ãªãœãŒã¹äŸåé¢ä¿ã°ã©ãã¯ãã¢ããªã±ãŒã·ã§ã³å ã®ç°ãªãããŒã¿ãªãœãŒã¹éã®äŸåé¢ä¿ãå¯èŠåããŸãããããã®äŸåé¢ä¿ãçè§£ããããšã¯ãå¹ççãªããŒã¿èªã¿èŸŒã¿ãªãŒã±ã¹ãã¬ãŒã·ã§ã³ã«ãšã£ãŠéåžžã«éèŠã§ããã©ã®ãªãœãŒã¹ãä»ã®ãªãœãŒã¹ã«äŸåããŠããããç¹å®ããããšã§ãæé©ãªé åºã§ããŒã¿ããã§ããããé å»¶ãæå°éã«æããããã©ãŒãã³ã¹ãåäžãããããšãã§ããŸãã
ãªãœãŒã¹äŸåé¢ä¿ã°ã©ãã®äœæ
ãŸããã¢ããªã±ãŒã·ã§ã³ã§å¿ èŠãªãã¹ãŠã®ããŒã¿ãªãœãŒã¹ãç¹å®ããŸãããããã¯APIãšã³ããã€ã³ããããŒã¿ããŒã¹ã¯ãšãªããããã¯ããŒã«ã«ã®ããŒã¿ãã¡ã€ã«ãããããŸãããæ¬¡ã«ããããã®ãªãœãŒã¹éã®äŸåé¢ä¿ããããã³ã°ããŸããäŸãã°ããŠãŒã¶ãŒãããã£ãŒã«ã³ã³ããŒãã³ãã¯ãŠãŒã¶ãŒIDã«äŸåãããã®ãŠãŒã¶ãŒIDã¯èªèšŒããŒã¿ã«äŸåããå ŽåããããŸãã
äŸïŒEã³ããŒã¹ã¢ããªã±ãŒã·ã§ã³
Eã³ããŒã¹ã¢ããªã±ãŒã·ã§ã³ãèããŠã¿ãŸãããã以äžã®ãªãœãŒã¹ãååšããå¯èœæ§ããããŸãïŒ
- ãŠãŒã¶ãŒèªèšŒ: ãŠãŒã¶ãŒèªèšŒæ å ±ãå¿ èŠã§ãã
- ååãªã¹ã: ã«ããŽãªIDãå¿ èŠã§ãïŒããã²ãŒã·ã§ã³ã¡ãã¥ãŒããååŸïŒã
- åå詳现: ååIDãå¿ èŠã§ãïŒååãªã¹ãããååŸïŒã
- ãŠãŒã¶ãŒã«ãŒã: ãŠãŒã¶ãŒèªèšŒãå¿ èŠã§ãã
- é éãªãã·ã§ã³: ãŠãŒã¶ãŒã®äœæãå¿ èŠã§ãïŒãŠãŒã¶ãŒãããã£ãŒã«ããååŸïŒã
äŸåé¢ä¿ã°ã©ãã¯æ¬¡ã®ããã«ãªããŸãïŒ
ãŠãŒã¶ãŒèªèšŒ --> ãŠãŒã¶ãŒã«ãŒã, é éãªãã·ã§ã³ ååãªã¹ã --> åå詳现 é éãªãã·ã§ã³ --> ãŠãŒã¶ãŒãããã£ãŒã«ïŒäœæïŒ
ãã®ã°ã©ãã¯ãããŒã¿ãã©ã®é åºã§ãã§ããããå¿ èŠãããããçè§£ããã®ã«åœ¹ç«ã¡ãŸããäŸãã°ããŠãŒã¶ãŒãèªèšŒããããŸã§ãŠãŒã¶ãŒã«ãŒããèªã¿èŸŒãããšã¯ã§ããŸããã
ãªãœãŒã¹äŸåé¢ä¿ã°ã©ãã䜿çšããå©ç¹
- æé©åãããããŒã¿ãã§ãã: äŸåé¢ä¿ãçè§£ããããšã§ãå¯èœãªéãããŒã¿ã䞊è¡ããŠãã§ããããå šäœã®èªã¿èŸŒã¿æéãççž®ã§ããŸãã
- ãšã©ãŒãã³ããªã³ã°ã®æ¹å: äŸåé¢ä¿ãæç¢ºã«çè§£ããããšã§ããšã©ãŒãããé©åã«åŠçã§ããŸããéèŠãªãªãœãŒã¹ã®èªã¿èŸŒã¿ã«å€±æããå Žåãã¢ããªã±ãŒã·ã§ã³ã®ä»ã®éšåã«åœ±é¿ãäžããããšãªããé©åãªãšã©ãŒã¡ãã»ãŒãžã衚瀺ã§ããŸãã
- ããã©ãŒãã³ã¹ã®åäž: å¹ççãªããŒã¿èªã¿èŸŒã¿ã¯ãããå¿çæ§ãé«ãã髿§èœãªã¢ããªã±ãŒã·ã§ã³ã«ã€ãªãããŸãã
- ãããã°ã®ç°¡çŽ å: åé¡ãçºçããå ŽåãäŸåé¢ä¿ã°ã©ãã¯æ ¹æ¬åå ãè¿ éã«ç¹å®ããã®ã«åœ¹ç«ã¡ãŸãã
SuspenseãšãªãœãŒã¹äŸåé¢ä¿ã°ã©ãã«ããããŒã¿èªã¿èŸŒã¿ãªãŒã±ã¹ãã¬ãŒã·ã§ã³
React SuspenseãšãªãœãŒã¹äŸåé¢ä¿ã°ã©ããçµã¿åãããããšã§ã宣èšçãã€å¹ççãªæ¹æ³ã§ããŒã¿èªã¿èŸŒã¿ããªãŒã±ã¹ãã¬ãŒã·ã§ã³ã§ããŸããç®æšã¯ãæé©ãªé åºã§ããŒã¿ããã§ããããé å»¶ãæå°éã«æããã·ãŒã ã¬ã¹ãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããããšã§ãã
ããŒã¿èªã¿èŸŒã¿ãªãŒã±ã¹ãã¬ãŒã·ã§ã³ã®æé
- ããŒã¿ãªãœãŒã¹ã®å®çŸ©: ã¢ããªã±ãŒã·ã§ã³ã§å¿ èŠãªãã¹ãŠã®ããŒã¿ãªãœãŒã¹ãç¹å®ããŸãã
- ãªãœãŒã¹äŸåé¢ä¿ã°ã©ãã®äœæ: ãããã®ãªãœãŒã¹éã®äŸåé¢ä¿ããããã³ã°ããŸãã
- Suspenseäºæã®ããŒã¿ãã§ããã®å®è£
:
swrãreact-queryãªã©ã®ã©ã€ãã©ãªã䜿çšããããç¬èªã«å®è£ ããŠãSuspenseãšäºææ§ã®ããæ¹æ³ã§ããŒã¿ããã§ããããŸãããããã®ã©ã€ãã©ãªã¯ãPromiseãäŸå€ãšããŠã¹ããŒããããã®ãthenableãèŠä»¶ãåŠçããŸãã - ã³ã³ããŒãã³ããSuspenseå¢çã§ã©ãã: éåæããŒã¿ã«äŸåããã³ã³ããŒãã³ãã
<Suspense>ã³ã³ããŒãã³ãã§ã©ããããããŒãã£ã³ã°ç¶æ ã®ãã©ãŒã«ããã¯UIãæäŸããŸãã - ããŒã¿ãã§ããé åºã®æé©å: ãªãœãŒã¹äŸåé¢ä¿ã°ã©ãã䜿çšããŠãããŒã¿ããã§ããããæé©ãªé åºã決å®ããŸããç¬ç«ãããªãœãŒã¹ã¯äžŠè¡ããŠãã§ããããŸãã
- ãšã©ãŒã®é©åãªåŠç: ãšã©ãŒå¢çãå®è£ ããŠãããŒã¿ãã§ããäžã«çºçãããšã©ãŒããã£ããããé©åãªãšã©ãŒã¡ãã»ãŒãžã衚瀺ããŸãã
äŸïŒæçš¿ä»ãã®ãŠãŒã¶ãŒãããã£ãŒã«
ãŠãŒã¶ãŒæ å ±ãšãã®æçš¿ã®ãªã¹ãã衚瀺ãããŠãŒã¶ãŒãããã£ãŒã«ããŒãžãèããŠã¿ãŸãããã以äžã®ãªãœãŒã¹ãé¢äžããŸãïŒ
- ãŠãŒã¶ãŒãããã£ãŒã«: ãŠãŒã¶ãŒã®è©³çްïŒååãã¡ãŒã«ã¢ãã¬ã¹ãªã©ïŒããã§ããããŸãã
- ãŠãŒã¶ãŒã®æçš¿: ãŠãŒã¶ãŒã®æçš¿ã®ãªã¹ãããã§ããããŸãã
UserPostsã³ã³ããŒãã³ãã¯UserProfileã³ã³ããŒãã³ãã«äŸåããŸããSuspenseã§ãããå®è£
ããæ¹æ³ã¯æ¬¡ã®ãšããã§ãïŒ
import React, { Suspense } from 'react';
import { use } from 'react';
import { fetchUserProfile, fetchUserPosts } from './api';
// Promiseãã¹ããŒããããŒã¿ãã§ãããã·ãã¥ã¬ãŒãããã·ã³ãã«ãªé¢æ°
const createResource = (promise) => {
let status = 'pending';
let result;
let suspender = promise.then(
(r) => {
status = 'success';
result = r;
},
(e) => {
status = 'error';
result = e;
}
);
return {
read() {
if (status === 'pending') {
throw suspender;
}
if (status === 'error') {
throw result;
}
return result;
}
};
};
const userProfileResource = createResource(fetchUserProfile(123)); // ãŠãŒã¶ãŒID 123ãæ³å®
const userPostsResource = createResource(fetchUserPosts(123));
function UserProfile() {
const profile = userProfileResource.read();
return (
ãŠãŒã¶ãŒãããã£ãŒã«
åå: {profile.name}
ã¡ãŒã«ã¢ãã¬ã¹: {profile.email}
);
}
function UserPosts() {
const posts = userPostsResource.read();
return (
ãŠãŒã¶ãŒã®æçš¿
{posts.map(post => (
- {post.title}
))}
);
}
function ProfilePage() {
return (
);
}
export default ProfilePage;
ãã®äŸã§ã¯ãfetchUserProfileãšfetchUserPostsã¯Promiseãè¿ãéåæé¢æ°ã§ããcreateResource颿°ã¯ãPromiseãreadã¡ãœãããæã€Suspenseäºæã®ãªãœãŒã¹ã«å€æããŸããããŒã¿ãå©çšå¯èœã«ãªãåã«userProfileResource.read()ãŸãã¯userPostsResource.read()ãåŒã³åºããããšãPromiseãã¹ããŒãããã³ã³ããŒãã³ããäžæããŸããReactã¯ãã®åŸã<Suspense>å¢çã§æå®ããããã©ãŒã«ããã¯UIãã¬ã³ããªã³ã°ããŸãã
ããŒã¿ãã§ããé åºã®æé©å
äžèšã®äŸã§ã¯ãUserProfileãšUserPostsã³ã³ããŒãã³ãã¯å¥ã
ã®<Suspense>å¢çã§ã©ãããããŠããŸããããã«ããããããã¯ç¬ç«ããŠããŒãã§ããŸããããUserPostsãUserProfileããã®ããŒã¿ã«äŸåããŠããå ŽåããŠãŒã¶ãŒãããã£ãŒã«ããŒã¿ãæåã«ããŒããããããã«ããŒã¿ãã§ããããžãã¯ã調æŽããå¿
èŠããããŸãã
äžã€ã®ã¢ãããŒãã¯ãUserProfileããååŸãããŠãŒã¶ãŒIDãfetchUserPostsã«æž¡ãããšã§ããããã«ããããŠãŒã¶ãŒãããã£ãŒã«ãããŒããããåŸã«ã®ã¿æçš¿ããã§ãããããããšãä¿èšŒãããŸãã
é«åºŠãªãã¯ããã¯ãšèæ ®äºé
Suspenseã䜿çšãããµãŒããŒãµã€ãã¬ã³ããªã³ã°ïŒSSRïŒ
Suspenseã¯ãµãŒããŒãµã€ãã¬ã³ããªã³ã°ïŒSSRïŒãšçµã¿åãããŠãååããŒãžèªã¿èŸŒã¿æéãæ¹åããããšãã§ããŸãããã ããSuspenseã䜿çšããSSRã¯æ éãªæ€èšãå¿ èŠã§ããåæã¬ã³ããªã³ã°äžã«äžæãããšãããã©ãŒãã³ã¹ã®åé¡ã«ã€ãªããå¯èœæ§ãããããã§ããéèŠãªããŒã¿ãåæã¬ã³ããªã³ã°åã«å©çšå¯èœã§ããããšã確èªããããã¹ããªãŒãã³ã°SSRã䜿çšããŠããŒã¿ãå©çšå¯èœã«ãªãã«ã€ããŠããŒãžã段éçã«ã¬ã³ããªã³ã°ããããšãéèŠã§ãã
ãšã©ãŒå¢ç
ãšã©ãŒå¢çã¯ãããŒã¿ãã§ããäžã«çºçãããšã©ãŒãåŠçããããã«äžå¯æ¬ ã§ãã<Suspense>å¢çããšã©ãŒå¢çã§ã©ããããŠãã¹ããŒããããšã©ãŒããã£ãããããŠãŒã¶ãŒã«é©åãªãšã©ãŒã¡ãã»ãŒãžã衚瀺ããŸããããã«ããããšã©ãŒãã¢ããªã±ãŒã·ã§ã³å
šäœãã¯ã©ãã·ã¥ãããã®ãé²ããŸãã
import React, { Suspense } from 'react';
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// 次ã®ã¬ã³ããªã³ã°ã§ãã©ãŒã«ããã¯UIã衚瀺ãããããã«ç¶æ
ãæŽæ°ããŸãã
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
// ãšã©ãŒããšã©ãŒå ±åãµãŒãã¹ã«èšé²ããããšãã§ããŸã
console.error(error, errorInfo);
}
render() {
if (this.state.hasError) {
// ä»»æã®ã«ã¹ã¿ã ãã©ãŒã«ããã¯UIãã¬ã³ããªã³ã°ã§ããŸã
return <h1>åé¡ãçºçããŸããã</h1>;
}
return this.props.children;
}
}
function App() {
return (
<ErrorBoundary>
<Suspense fallback={<p>èªã¿èŸŒã¿äž...</p>}>
<MyComponent />
</Suspense>
</ErrorBoundary>
);
}
ããŒã¿ãã§ããã©ã€ãã©ãª
ããã€ãã®ããŒã¿ãã§ããã©ã€ãã©ãªã¯ãReact Suspenseãšã·ãŒã ã¬ã¹ã«é£æºããããã«èšèšãããŠããŸãããããã®ã©ã€ãã©ãªã¯ããã£ãã·ã³ã°ãéè€æé€ãèªåå詊è¡ãªã©ã®æ©èœãæäŸããããŒã¿ãã§ãããããå¹ççã§ä¿¡é Œæ§ã®é«ããã®ã«ããŸãã人æ°ã®ããéžæè¢ã«ã¯æ¬¡ã®ãããªãã®ããããŸãïŒ
- SWR: ãªã¢ãŒãããŒã¿ãã§ããçšã®è»œéã©ã€ãã©ãªãSuspenseãçµã¿èŸŒã¿ã§ãµããŒããããã£ãã·ã³ã°ãšåæ€èšŒãèªåçã«åŠçããŸãã
- React Query: ããã¯ã°ã©ãŠã³ãæŽæ°ããªããã£ãã¹ãã£ãã¯æŽæ°ãäŸåã¯ãšãªãªã©ã®é«åºŠãªæ©èœãæäŸãããããå æ¬çãªããŒã¿ãã§ããã©ã€ãã©ãªã
- Relay: ããŒã¿é§ååã®Reactã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã®ãã¬ãŒã ã¯ãŒã¯ãGraphQLã䜿çšããŠããŒã¿ã宣èšçã«ãã§ããããã³ç®¡çããæ¹æ³ãæäŸããŸãã
ã°ããŒãã«ã¢ããªã±ãŒã·ã§ã³ã«é¢ããèæ ®äºé
ã°ããŒãã«ãªèŠèŽè åãã®ã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããå ŽåãããŒã¿èªã¿èŸŒã¿ãªãŒã±ã¹ãã¬ãŒã·ã§ã³ãå®è£ ããéã«ä»¥äžã®èŠå ãèæ ®ããŠãã ããïŒ
- ãããã¯ãŒã¯é å»¶: ãããã¯ãŒã¯é å»¶ã¯ãŠãŒã¶ãŒã®å Žæã«ãã£ãŠå€§ããç°ãªãå ŽåããããŸããé å»¶ã®åœ±é¿ãæå°éã«æããããã«ããŒã¿ãã§ããæŠç¥ãæé©åããŠãã ãããã³ã³ãã³ãããªããªãŒãããã¯ãŒã¯ïŒCDNïŒã䜿çšããŠéçã¢ã»ããããŠãŒã¶ãŒã®è¿ãã«ãã£ãã·ã¥ããããšãæ€èšããŠãã ããã
- ããŒã¿ã®ããŒã«ã©ã€ãŒãŒã·ã§ã³: ããŒã¿ããŠãŒã¶ãŒã®åžæããèšèªãšå°åã«ããŒã«ã©ã€ãºãããŠããããšã確èªããŠãã ãããåœéåïŒi18nïŒã©ã€ãã©ãªã䜿çšããŠããŒã«ã©ã€ãŒãŒã·ã§ã³ãåŠçããŸãã
- ã¿ã€ã ãŸãŒã³: æ¥ä»ãšæå»ã衚瀺ããéã¯ã¿ã€ã ãŸãŒã³ã«æ³šæããŠãã ããã
moment.jsãdate-fnsã®ãããªã©ã€ãã©ãªã䜿çšããŠã¿ã€ã ãŸãŒã³å€æãåŠçããŸãã - é貚: é貚䟡å€ããŠãŒã¶ãŒã®çŸå°é貚ã§è¡šç€ºããŸããå¿ èŠã«å¿ããŠäŸ¡æ Œã倿ããããã«éè²šå€æAPIã䜿çšããŸãã
- APIãšã³ããã€ã³ã: é å»¶ãæå°éã«æããããã«ããŠãŒã¶ãŒã«å°ççã«è¿ãAPIãšã³ããã€ã³ããéžæããŸããå©çšå¯èœã§ããã°ããªãŒãžã§ãã«APIãšã³ããã€ã³ãã®äœ¿çšãæ€èšããŠãã ããã
ãã¹ããã©ã¯ãã£ã¹
- Suspenseå¢çãå°ããä¿ã€: ã¢ããªã±ãŒã·ã§ã³ã®å€§éšåãåäžã®
<Suspense>å¢çã§ã©ããããªãã§ãã ãããUIãããå°ããã管çããããã³ã³ããŒãã³ãã«åå²ããåã³ã³ããŒãã³ããç¬èªã®Suspenseå¢çã§ã©ããããŸãã - æå³ã®ãããã©ãŒã«ããã¯ã䜿çšãã: ããŒã¿ãèªã¿èŸŒã¿äžã§ããããšããŠãŒã¶ãŒã«ç¥ãããæå³ã®ãããã©ãŒã«ããã¯UIãæäŸããŸããäžè¬çãªããŒãã£ã³ã°ã¹ãããŒã®äœ¿çšã¯é¿ããŠãã ããã代ããã«ãæçµçãªUIã«äŒŒããã¬ãŒã¹ãã«ããŒUIã衚瀺ããŸãã
- ããŒã¿ãã§ãããæé©åãã:
swrãreact-queryã®ãããªããŒã¿ãã§ããã©ã€ãã©ãªã䜿çšããŠããŒã¿ãã§ãããæé©åããŸãããããã®ã©ã€ãã©ãªã¯ããã£ãã·ã³ã°ãéè€æé€ãèªåå詊è¡ãªã©ã®æ©èœãæäŸããŸãã - ãšã©ãŒãé©åã«åŠçãã: ãšã©ãŒå¢çã䜿çšããŠãããŒã¿ãã§ããäžã®ãšã©ãŒããã£ãããããŠãŒã¶ãŒã«é©åãªãšã©ãŒã¡ãã»ãŒãžã衚瀺ããŸãã
- 培åºçã«ãã¹ããã: ããŒã¿èªã¿èŸŒã¿ãæ£ããæ©èœãããšã©ãŒãé©åã«åŠçãããããšã確èªããããã«ãã¢ããªã±ãŒã·ã§ã³ã培åºçã«ãã¹ãããŸãã
çµè«
React Suspenseã¯ããªãœãŒã¹äŸåé¢ä¿ã°ã©ããšçµã¿åãããããšã§ãããŒã¿èªã¿èŸŒã¿ãªãŒã±ã¹ãã¬ãŒã·ã§ã³ã«å¯Ÿãã匷åã§å®£èšçãªã¢ãããŒããæäŸããŸããããŒã¿ãªãœãŒã¹éã®äŸåé¢ä¿ãçè§£ããSuspenseäºæã®ããŒã¿ãã§ãããå®è£ ããããšã§ã髿§èœã§ãŠãŒã¶ãŒãã¬ã³ããªãŒãªã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ã§ããŸããã°ããŒãã«ãªèŠèŽè ã«å¯ŸããŠã·ãŒã ã¬ã¹ãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãä¿èšŒããããã«ãããŒã¿ãã§ããæŠç¥ãæé©åãããšã©ãŒãé©åã«åŠçããã¢ããªã±ãŒã·ã§ã³ã培åºçã«ãã¹ãããããšãå¿ããªãã§ãã ãããReactãé²åãç¶ããäžã§ãSuspenseã¯çŸä»£ã®Webã¢ããªã±ãŒã·ã§ã³æ§ç¯ã«ãããŠãããã«äžå¯æ¬ ãªéšåãšãªãã§ãããã